<template>
  <div class="tab5">
    <Tabs type="card" @on-click="tabclick"  value="tb5">
        <TabPane name="tb1"  label="柴油机振动监测数据">
        </TabPane>
        <TabPane name="tb2" label="柴油机润滑油常规分析">
        </TabPane>
        <TabPane name="tb3" label="柴油机润滑油金属分析">
        </TabPane>
        <TabPane name="tb4" label="柴油机冷却水分析">
        </TabPane>
        <TabPane name="tb5" label="柴油机燃油分析">
        </TabPane>
    </Tabs>
    <div class="searchDiv">
      <Form :model="searchItem" :label-width="90">
        <Row :gutter="10">
         <Col span="24" style="margin-bottom:15px;">
            <Upload style="float:left;" :headers='fileheader' :on-success='fileSuccess' :show-upload-list='false'
                :action="apihost+'/admin-api/admins/equipmentOilAnalyze/upload'">
                <Button  type="info" class="marRight">导入EXcel</Button>
            </Upload>
            <Button type="primary" class="marRight"  @click="add">录入数据</Button>
            <Button type="success" @click="download">导出Excel</Button>
          </Col>
          <!-- <Col span="6">
            <FormItem label="电站">
              <Select
                v-model="searchItem.powerStation"
                filterable
                @on-change="getHd"
              >
                <Option
                  v-for="(item, index) in powerStationList"
                  :value="item"
                  :key="index"
                  >{{ item }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="HD编号">
              <Select
                v-model="searchItem.hdNumber"
                clearable
                filterable
                :disabled="HBnumberList.length == 0"
                @on-change="getJz"
              >
                <Option
                  v-for="(item, index) in HBnumberList"
                  :value="item"
                  :key="index"
                  >{{ item }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="机组编号">
              <Select
                v-model="searchItem.aircrewNumber"
                filterable
                :disabled="JZnumberList.length == 0"
              >
                <Option
                  v-for="(item, index) in JZnumberList"
                  :value="item"
                  :key="index"
                  >{{ item }}</Option
                >
              </Select>
            </FormItem>
          </Col> -->
          </Row>
          <Row :gutter="10">
             <Col span="5">
                <FormItem label="取样系统" >
                      <Select v-model="searchItem.system" @on-change="getSelect1">
                        <Option v-for="(item, index) in qyxtList" :value="item.displayName" :key="index">{{ item.displayName }}</Option>
                     </Select>
                </FormItem>
           </Col>
           <Col span="5">
                    <FormItem label="取样部位">
                      <Select v-model="searchItem.part" :disabled="qybwList.length == 0">
                        <Option v-for="(item, index) in qybwList" :value="item.displayName" :key="index">{{ item.displayName }}</Option>
                     </Select>
                    </FormItem>
           </Col>
          <Col span="5">
            <FormItem label="分析参数">
              <Select v-model="searchItem.analyzeParam">
                <Option v-for="(item, index) in mainCode" :value="item.value">{{
                  item.name
                }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="试验时间">
              <DatePicker type="datetimerange" @on-change="changeTime"	:value="timearry" :options="options2" placement="bottom-end" placeholder="请选择时间范围" style="width:100%"></DatePicker>
            </FormItem>
          </Col>
          <Col span="4">
            <Button type="primary" @click="addJz">加入对比</Button>
          </Col>
        </Row>
        <div v-if="tagList1.length > 0" style="margin-bottom:10px;">
          <Tag
            type="border"
            color="primary"
            v-for="item in tagList1"
            :key="item"
            :name="item"
            closable
            @on-close="handleClose1"
            >{{ item }}</Tag
          >
        </div>
      </Form>
    </div>
    <div style="margin-bottom:15px;overflow:hidden;">
      <Select  v-model="paramsLine" placeholder="请选择参考值" multiple @on-change="changeLine" >
                <Option value="运动粘度最低值">运动粘度最低值</Option>
                <Option value="运动粘度最高值">运动粘度最高值</Option>
                <Option value="硫含量">硫含量</Option>
                <Option value="水分">水分</Option>
                <Option value="酸度">酸度</Option>
                <Option value="灰分">灰分</Option>
                <Option value="10%蒸余物残碳">10%蒸余物残碳</Option>
                <Option value="机械杂质">机械杂质</Option>
                <Option value="氧化安定性，总不容物">氧化安定性，总不容物</Option>
                <Option value="闪点（闭口）">闪点（闭口）</Option>
                <Option value="密度">密度</Option>
                <Option value="十六烷值">十六烷值</Option>
                <Option value="净热值">净热值</Option>
                <Option value="校正磨斑直径">校正磨斑直径</Option>
                <Option value="铜片腐蚀">铜片腐蚀</Option>
                <Option value="冷虑点">冷虑点</Option>
            </Select>
    </div>
    <div id="myChart" :style="{width: '100%', height: '500px'}"></div>
    <Table
      :loading="loading"
      border
      :columns="columns"
      :data="tableData"
    ></Table>

    <Page
      show-total
      :total="total"
      :current="pageNo"
      :page-size="pageSize"
      style="margin:20px auto;text-align:center"
      @on-change="changePage"
    />
    <Modal
      :mask-closable="false"
      v-model="modal1"
      :title="modalTitle"
      width="1000"
      :styles="{ top: '20px' }"
      @on-ok="ok"
      :loading="btnClick"
    >
      <Form :label-width="100">
        <Row :gutter="10" class="xzjz">
          <!-- <Col span="8">
            <FormItem label="电站">
              <Select
                v-model="formItem.powerStation"
                clearable
                filterable
                @on-change="getHd"
              >
                <Option
                  v-for="(item, index) in powerStationList"
                  :value="item"
                  :key="index"
                  >{{ item }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="HD编号">
              <Select
                v-model="formItem.hdNumber"
                clearable
                filterable
                :disabled="HBnumberList.length == 0"
                @on-change="getJz"
              >
                <Option
                  v-for="(item, index) in HBnumberList"
                  :value="item"
                  :key="index"
                  >{{ item }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="机组编号">
              <Select
                v-model="formItem.aircrewNumber"
                clearable
                filterable
                :disabled="JZnumberList.length == 0"
              >
                <Option
                  v-for="(item, index) in JZnumberList"
                  :value="item"
                  :key="index"
                  >{{ item }}</Option
                >
              </Select>
            </FormItem>
          </Col> -->
          <Col span="8">
            <FormItem label="取样系统">
              <Select v-model="formItem.system" clearable filterable @on-change="getSelect1">
                <Option
                  v-for="(item, index) in qyxtList"
                  :value="item.displayName"
                  :key="index"
                  >{{ item.displayName }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="取样部位">
              <Select v-model="formItem.part" :disabled="qybwList.length == 0" clearable filterable>
                <Option
                  v-for="(item, index) in qybwList"
                  :value="item.displayName"
                  :key="index"
                  >{{ item.displayName }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="取样时间">
              <DatePicker
                type="datetime" format="yyyy-MM-dd HH:mm:ss"
                v-model="formItem.time"
                @on-change="time"
                placeholder="选择日期"
                style="width: 100%"
              ></DatePicker>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="分析人">
              <Input
                v-model="formItem.user"
                placeholder="请输入"
              ></Input>
            </FormItem>
          </Col>
           <Col span="8">
            <FormItem label="色度">
              <Input v-model="formItem.chroma" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="运动粘度">
              <Input v-model="formItem.viscosity" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="硫含量">
              <Input v-model="formItem.so2" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="水分">
              <Input v-model="formItem.wet" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="酸度">
              <Input v-model="formItem.acidity" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="灰分">
              <Input v-model="formItem.grey" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="10%蒸余物残碳">
              <Input v-model="formItem.co2" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="机械杂质">
              <Input v-model="formItem.mechanical" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="氧化安定性">
              <Input v-model="formItem.co" placeholder="请输入"></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
    <Modal
      :mask-closable="false"
      v-model="modal3"
      width="360"
      class-name="vertical-center-modal"
      @on-ok="remove(delID)"
    >
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>确认删除</span>
      </p>
      <div style="text-align:center">
        <p>确认删除此数据么？</p>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getTableData5,
  add5,
  edit5,
  delete5,
  download5,echart5
} from "@/api/offlineTrend";
import { getSelectOption,getSelectOption2, getAllEqu } from "@/api/select";
import { getToken } from '@/libs/util'
export default {
  data() {
    return {
      fileheader: {
        Authorization: 'Bearer ' + (getToken() ? getToken() : '')
      },
     searchItem: {
        // powerStation:"",
        // hdNumber:"",
        // aircrewNumber:'',
        system:'',
        part:'',
        analyzeParam:'chroma',
        startTime:"",
        endTime:""
      },
      modal1: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      timearry:[],
      JZnumberList: [],
      qyxtList:[],
      qybwList:[],
      formItem: {},
      columns: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          title: "取样系统",
          key: "system",
           width:100
        },
        {
          title: "取样部位",
          key: "part",
           width:100
        },
        {
          title: "取样时间",
          key: "time",
          tooltip:true,
          width:150
        },
        {
          title: "分析人",
          key: "user",
          width:100
        },
        {
          title: "色度",
          key: "chroma",
          width:100
        },
        {
          title: "运动粘度",
          key: "viscosity",
          width:100
        },
        {
          title: "硫含量",
          key: "so2",
          width:100
        },
        {
          title: "水分(v/v)",
          key: "wet",
          width:100
        },
        {
          title: "酸度",
          key: "acidity",
          width:100
        },
        {
          title: "灰分(m/m)",
          key: "grey",
          width:100
        },
        {
          title: "10%蒸余物残碳",
          key: "co2",
          width:140
        },
        {
          title: "机械杂质",
          key: "mechanical",
          width:100
        },
        {
          title: "氧化安定性",
          key: "co",
          width:100
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          fixed: 'right',
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(JSON.stringify(params));
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.openDel(params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      tableData: [],
      isAdd: true,
      modalTitle:'录入数据',
      btnClick: false,
      loading: true,
      options2: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
      delID: 0,
      modal3: false,
      modal1: false,
      colorarry: [
        "#c12e34",
        "#e6b600",
        "#0098d9",
        "#2b821d",
        "#005eaa",
        "#339ca8",
        "#a134d4",
        "#32a487",
        "#eb1e99",
        "#ff8819"
      ],
      option: {
        tooltip: {},
        legend: {
          data: [],
          top: "10",
          type: "scroll"
        },
        dataZoom: [
          // {
          //   type: "slider", //数据滑块
          //   start: 0
          // },
          // {
          //   type: "inside" //使鼠标在图表中时滚轮可用
          // }
        ],
        xAxis: {
          type: "time",
          axisLabel: {
            interval: 0,
            formatter: function(time) {
              const dateTime = new Date(time);
              const year = dateTime.getFullYear();
              const month =
                dateTime.getMonth() + 1 < 10
                  ? "0" + (dateTime.getMonth() + 1)
                  : dateTime.getMonth() + 1;
              const date =
                dateTime.getDate() < 10
                  ? "0" + dateTime.getDate()
                  : dateTime.getDate();
              return (
                year +
                "-" +
                month +
                "-" +
                date
              );
            }
          }
        },
        yAxis: {
          type: "value"
        },
        series: []
      },
      tagList1: [],
      mainCode: [
        { value: "chroma", name: "色度" },
        { value: "viscosity", name: "运动粘度" },
        { value: "so2", name: "硫含量" },
        { value: "wet", name: "水分" },
        { value: "acidity", name: "酸度" },
        { value: "grey", name: "灰分" },
        { value: "co2", name: "10%蒸余物残碳" },
        { value: "mechanical", name: "机械杂质" },
        { value: "co", name: "氧化安定性" }
      ],
      paramsLine:[]
    };
  },
  methods: {
    changeLine(e){
      let that=this;
      that.option.series=that.option.series.filter(item=>item.markLine==undefined||item.markLine==null);
      that.$echarts.init(document.getElementById("myChart")).dispose();
               if(e.indexOf('运动粘度最低值')!=-1) {
               that.option.series.push({
                  name:'运动粘度最低值',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "运动粘度最低值(1.4)"
                      },
                      yAxis: 1.4
                    },]
                  }
                })
               }
            if(e.indexOf('运动粘度最高值')!=-1) {
           that.option.series.push({
                  name:'运动粘度最高值',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#cc0000",

                      },
                      label: {
                        position: 'end',
                        formatter: "运动粘度最高值(5.5)",
                      },
                      yAxis: 5.5
                    }]
                  }
                })
            }
          if(e.indexOf('硫含量')!=-1) {
               that.option.series.push({
                  name:'硫含量',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "硫含量(≤2000)"
                      },
                      yAxis: 2000
                    },]
                  }
                })
               }
               if(e.indexOf('水分')!=-1) {
               that.option.series.push({
                  name:'水分',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "水分(≤300)"
                      },
                      yAxis: 300
                    },]
                  }
                })
               }
               if(e.indexOf('酸度')!=-1) {
               that.option.series.push({
                  name:'酸度',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "酸度(≤7)"
                      },
                      yAxis: 7
                    },]
                  }
                })
               }
               if(e.indexOf('灰分')!=-1) {
               that.option.series.push({
                  name:'灰分',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "灰分(≤0.01)"
                      },
                      yAxis: 0.01
                    },]
                  }
                })
               }
               if(e.indexOf('10%蒸余物残碳')!=-1) {
               that.option.series.push({
                  name:'10%蒸余物残碳',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "10%蒸余物残碳(≤0.3)"
                      },
                      yAxis: 0.3
                    },]
                  }
                })
               }
               if(e.indexOf('机械杂质')!=-1) {
               that.option.series.push({
                  name:'机械杂质',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "机械杂质(≤24)"
                      },
                      yAxis: 24
                    },]
                  }
                })
               }
               if(e.indexOf('氧化安定性，总不容物')!=-1) {
               that.option.series.push({
                  name:'氧化安定性，总不容物',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "氧化安定性，总不容物(≤2.5)"
                      },
                      yAxis: 2.5
                    },]
                  }
                })
               }
               if(e.indexOf('闪点（闭口）')!=-1) {
               that.option.series.push({
                  name:'闪点（闭口）',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "闪点（闭口）(≥55)"
                      },
                      yAxis: 55
                    },]
                  }
                })
               }
               if(e.indexOf('密度')!=-1) {
               that.option.series.push({
                  name:'密度',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "密度(≤890)"
                      },
                      yAxis: 890
                    },]
                  }
                })
               }
               if(e.indexOf('十六烷值')!=-1) {
               that.option.series.push({
                  name:'十六烷值',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "十六烷值(≥45)"
                      },
                      yAxis: 45
                    },]
                  }
                })
               }
               if(e.indexOf('净热值')!=-1) {
               that.option.series.push({
                  name:'净热值',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "净热值(>42000)"
                      },
                      yAxis: 42000
                    },]
                  }
                })
               }
               if(e.indexOf('校正磨斑直径')!=-1) {
               that.option.series.push({
                  name:'校正磨斑直径',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "校正磨斑直径(≤460)"
                      },
                      yAxis: 460
                    },]
                  }
                })
               }
               if(e.indexOf('铜片腐蚀')!=-1) {
               that.option.series.push({
                  name:'铜片腐蚀',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "铜片腐蚀(≤1)"
                      },
                      yAxis: 1
                    },]
                  }
                })
               }
               if(e.indexOf('冷虑点')!=-1) {
               that.option.series.push({
                  name:'冷虑点',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "冷虑点(≤4)"
                      },
                      yAxis: 4
                    },]
                  }
                })
               }
          that.$echarts.init(document.getElementById("myChart")).setOption(that.option);

    },
    tabclick(e){
      if(e=='tb1'){
        this.$router.push({path:'../offlineTrend'})
      }else if(e=='tb2'){
        this.$router.push({path:'tab2'})
      }else if(e=='tb3'){
        this.$router.push({path:'tab3'})
      }else if(e=='tb4'){
        this.$router.push({path:'tab4'})
      }else{
        this.$router.push({path:'tab5'})
      }
    },
    changeTime(e){
      this.searchItem.startTime=e[0];
      this.searchItem.endTime=e[1];
      this.$echarts.init(document.getElementById("myChart")).dispose();

      this.tagList1=[]
      this.option.legend.data=[]
      this.option.series=[]
      this.addJz();
    },
    download(){
      download5({pageNo:1,pageSize:100}).then(res => {
        const blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;'});

        const ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),
            ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),
            ieEDGE = navigator.userAgent.match(/Edge/g),
            ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));
        console.log('ie:' + ie);
        console.log('ieVer:' + ieVer);
        if (ie && ieVer < 10) {
            this.message.error('No blobs on IE<10');
            return;
        }
        if (ieVer > -1) {
            window.navigator.msSaveBlob(blob, '柴油机燃油分析.xlsx');
        } else {
            const url = window.URL.createObjectURL(blob);
            let link = document.createElement('a');
            link.setAttribute('href', url);
            link.setAttribute('download', '柴油机燃油分析.xlsx');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

      })
    },
    fileSuccess (response, file, fileList) {
      this.$Message.info('导入成功')
      this.getDataList();
    },
  time(e) {
      this.formItem.time = e;
    },
    getSelect1(e){
       getSelectOption2({
        code: "qybw_code",
        system:e
      })
        .then(res => {
          this.qybwList = res.data;
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    handleClose1(event, name) {
      this.$echarts.init(document.getElementById("myChart")).dispose();
      const index = this.tagList1.indexOf(name);
      this.tagList1.splice(index, 1);
      this.option.legend.data.splice(index, 1);
      this.option.series.splice(index, 1);
      this.$echarts.init(document.getElementById("myChart")).setOption(this.option);
    },
    addJz() {
      let that = this;
      if (this.tagList1.length > 9) {
        this.$Message.info("选择的对比已经很多了");
        return false;
      }
      if(this.searchItem.system==''){
        this.$Message.info("请选择取样系统");
        return false;
      }
      if(this.searchItem.part==''){
        this.$Message.info("请选择取样部位");
        return false;
      }
      echart5(this.searchItem).then(res => {
          if (res.code == 0&&res.data.length>0) {
             let csname=that.mainCode.filter(item=>item.value==that.searchItem.analyzeParam)[0].name;
             if (that.tagList1.indexOf(that.searchItem.system+'-'+that.searchItem.part+'-'+csname) == -1) {
                that.tagList1.push(that.searchItem.system+'-'+that.searchItem.part+'-'+csname);
                that.$echarts.init(document.getElementById("myChart")).dispose();
                that.option.legend.data.push(that.searchItem.system+'-'+that.searchItem.part+'-'+csname);
                let sjcolor = that.color16();
                let arry = [];
                for (let n = 0; n < res.data.length; n++) {
                  arry.push([res.data[n].time,res.data[n][that.searchItem.analyzeParam]]);
                }
                that.option.series.push({
                  name: that.searchItem.system+'-'+that.searchItem.part+'-'+csname,
                  data: arry,
                  type: "line",
                  smooth: true,
                  symbolSize: 8, //折线点的大小
                  itemStyle: {
                    normal: {
                      color: sjcolor, //折线点的颜色
                      lineStyle: {
                        color: sjcolor //折线的颜色
                      }
                    }
                  }
                });
                if(that.paramsLine.indexOf('运动粘度最低值')!=-1) {
               that.option.series.push({
                  name:'运动粘度最低值',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "运动粘度最低值(1.4)"
                      },
                      yAxis: 1.4
                    },]
                  }
                })
               }
            if(that.paramsLine.indexOf('运动粘度最高值')!=-1) {
           that.option.series.push({
                  name:'运动粘度最高值',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#cc0000",

                      },
                      label: {
                        position: 'end',
                        formatter: "运动粘度最高值(5.5)",
                      },
                      yAxis: 5.5
                    }]
                  }
                })
            }
          if(that.paramsLine.indexOf('硫含量')!=-1) {
               that.option.series.push({
                  name:'硫含量',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "硫含量(≤2000)"
                      },
                      yAxis: 2000
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('水分')!=-1) {
               that.option.series.push({
                  name:'水分',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "水分(≤300)"
                      },
                      yAxis: 300
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('酸度')!=-1) {
               that.option.series.push({
                  name:'酸度',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "酸度(≤7)"
                      },
                      yAxis: 7
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('灰分')!=-1) {
               that.option.series.push({
                  name:'灰分',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "灰分(≤0.01)"
                      },
                      yAxis: 0.01
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('10%蒸余物残碳')!=-1) {
               that.option.series.push({
                  name:'10%蒸余物残碳',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "10%蒸余物残碳(≤0.3)"
                      },
                      yAxis: 0.3
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('机械杂质')!=-1) {
               that.option.series.push({
                  name:'机械杂质',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "机械杂质(≤24)"
                      },
                      yAxis: 24
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('氧化安定性，总不容物')!=-1) {
               that.option.series.push({
                  name:'氧化安定性，总不容物',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "氧化安定性，总不容物(≤2.5)"
                      },
                      yAxis: 2.5
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('闪点（闭口）')!=-1) {
               that.option.series.push({
                  name:'闪点（闭口）',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "闪点（闭口）(≥55)"
                      },
                      yAxis: 55
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('密度')!=-1) {
               that.option.series.push({
                  name:'密度',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "密度(≤890)"
                      },
                      yAxis: 890
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('十六烷值')!=-1) {
               that.option.series.push({
                  name:'十六烷值',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "十六烷值(≥45)"
                      },
                      yAxis: 45
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('净热值')!=-1) {
               that.option.series.push({
                  name:'净热值',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "净热值(>42000)"
                      },
                      yAxis: 42000
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('校正磨斑直径')!=-1) {
               that.option.series.push({
                  name:'校正磨斑直径',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "校正磨斑直径(≤460)"
                      },
                      yAxis: 460
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('铜片腐蚀')!=-1) {
               that.option.series.push({
                  name:'铜片腐蚀',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "铜片腐蚀(≤1)"
                      },
                      yAxis: 1
                    },]
                  }
                })
               }
               if(that.paramsLine.indexOf('冷虑点')!=-1) {
               that.option.series.push({
                  name:'冷虑点',
                  type: "line",
                  smooth: true,
                  symbolSize: 4,
                  markLine:{
                    data: [{
                      silent: true, //鼠标悬停事件  true没有，false有
                      lineStyle: { //报警线的样式  ，虚实  颜色
                        type: "solid",
                        color: "#f59d41",
                      },
                      label: {
                        position: 'end',
                        formatter: "冷虑点(≤4)"
                      },
                      yAxis: 4
                    },]
                  }
                })
               }

                that.$echarts.init(document.getElementById("myChart")).setOption(that.option);
             }
          }else{
             that.$Message.info("此选项下无数据！");
          }
      })

    },

    color16() {
      var n = Math.floor(Math.random() * this.colorarry.length + 1) - 1;
      return this.colorarry[n];
    },
    getDataList() {
      let that = this;
      that.tableData = [];
      getTableData5({ pageNo: this.pageNo, pageSize: this.pageSize })
        .then(res => {
          if (res.code == 0) {
            that.loading = false;
            that.total = res.data.total;
            that.tableData = res.data.list;

            // that.allEquList2 = that.allEquList.filter(
            //   item => item.powerStation == res.data.list[0].powerStation
            // );
            // let arr2 = that.allEquList2.map(function(item) {
            //   return item.hdNumber;
            // });
            // that.HBnumberList = [...new Set(arr2)];

            // let arr3 = that.allEquList2.filter(
            //   item => item.hdNumber == res.data.list[0].hdNumber
            // );
            // let arr4 = arr3.map(function(item) {
            //   return item.aircrewNumber;
            // });
            // that.JZnumberList = [...new Set(arr4)];

            // that.searchItem.powerStation = res.data.list[0].powerStation;
            // that.searchItem.hdNumber = res.data.list[0].hdNumber;
            // that.searchItem.aircrewNumber = res.data.list[0].aircrewNumber;
            that.searchItem.system=that.qyxtList[0].displayName;
              getSelectOption2({
                code: "qybw_code",
                system:that.qyxtList[0].displayName
              })
                .then(res => {
                  that.qybwList = res.data;
                  that.searchItem.part=res.data[0].displayName;
                  that.addJz();
                })


          }
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    // getAllEqument() {
    //   let that=this;
    //   getAllEqu(null).then(res => {
    //     this.allEquList = res.data;
    //     let arr = res.data.map(function(item) {
    //       return item.powerStation;
    //     });
    //     this.powerStationList = [...new Set(arr)];
    //     this.getDataList();
    //     setTimeout(() => {
    //       that.addJz();
    //     }, 500);

    //   });
    // },
    // getHd(e) {
    //   this.JZnumberList = [];
    //   this.allEquList2 = this.allEquList.filter(item => item.powerStation == e);
    //   let arr2 = this.allEquList2.map(function(item) {
    //     return item.hdNumber;
    //   });
    //   this.HBnumberList = [...new Set(arr2)];
    // },
    // getJz(e) {
    //   let arr = this.allEquList2.filter(item => item.hdNumber == e);
    //   let arr2 = arr.map(function(item) {
    //     return item.aircrewNumber;
    //   });
    //   this.JZnumberList = [...new Set(arr2)];
    // },
    openDel(id) {
      this.modal3 = true;
      this.delID = id;
    },
    add() {
      this.formItem = {};
      this.isAdd = true;
      this.modal1 = true;
      this.modalTitle="录入数据"
    },
    edit(params) {
      this.modalTitle="编辑柴油机冷却水分析"
      this.formItem = JSON.parse(params).row;

      this.isAdd = false;
      this.modal1 = true;
      // this.allEquList2 = this.allEquList.filter(
      //   item => item.powerStation == this.formItem.powerStation
      // );
      // let arr2 = this.allEquList2.map(function(item) {
      //   return item.hdNumber;
      // });
      // this.HBnumberList = [...new Set(arr2)];

      // let arr3 = this.allEquList2.filter(
      //   item => item.hdNumber == this.formItem.hdNumber
      // );
      // let arr4 = arr3.map(function(item) {
      //   return item.aircrewNumber;
      // });
      // this.JZnumberList = [...new Set(arr4)];
    },
    timeFormat(time) {
      if(time instanceof Date==false){
        return time
      }
      const dateTime = new Date(time);
      const year = dateTime.getFullYear();
      const month = this.addZero(dateTime.getMonth() + 1);
      const date = this.addZero(dateTime.getDate());
      const hour = this.addZero(dateTime.getHours())
                const minute = this.addZero(dateTime.getMinutes())
                const second = this.addZero(dateTime.getSeconds())
                return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second
    },
    addZero(v) {
      return v < 10 ? "0" + v : v;
    },
    remove(id) {
      delete5({ id: id })
        .then(res => {
          if (res.code == 0) {
            this.$Message.info("删除成功");
            this.pageNo = 1;
            this.getDataList();
          } else {
            this.$Message.info(res.message);
          }
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    ok() {
      this.btnClick = true;
      if (this.isAdd) {
        add5(this.formItem)
          .then(res => {
            if (res.code == 0) {
              this.$Message.info("新增成功");
              this.getDataList();
              this.btnClick = false;
            } else {
              this.$Message.info(res.message);
            }
          })
          .catch(err => {
            console.error("err>" + JSON.stringify(err));
          });
      } else {
        this.formItem.time = this.timeFormat(
          this.formItem.time
        );
        edit5(this.formItem)
          .then(res => {
            if (res.code == 0) {
              this.$Message.info("编辑成功");
              this.getDataList();
              this.btnClick = false;
            } else {
              this.$Message.info(res.message);
            }
          })
          .catch(err => {
            console.error("err>" + JSON.stringify(err));
          });
      }
    },
    /** 分页 */
    changePage(pageNo) {
      this.pageNo = pageNo;
      this.getDataList();
    },
    getQyxt() {
      getSelectOption({
        code: "qyxt_code"
      })
        .then(res => {
          this.qyxtList = res.data;
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    // getQybw() {
    //   getSelectOption({
    //     code: "qybw_code"
    //   })
    //     .then(res => {
    //       this.qybwList = res.data;
    //     })
    //     .catch(err => {
    //       console.error("err>" + JSON.stringify(err));
    //     });
    // },
  },
  mounted() {
    this.getQyxt();
    let mmtime=this.options2.shortcuts[2].value();
    this.searchItem.startTime=this.timeFormat(mmtime[0]);
    this.searchItem.endTime=this.timeFormat(mmtime[1]);
    this.timearry=this.options2.shortcuts[2].value();
    setTimeout(() => {
      this.getDataList();
    }, 500);

    // 基于准备好的dom，初始化echarts实例
    let myChart = this.$echarts.init(document.getElementById("myChart"));
    // 绘制图表
    myChart.setOption(this.option);
  }
};
</script>

<style lang="less">
.tab5 {
 background: #fff;
  height: 100%;
  padding: 15px;
  font-size: 14px;
  .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-radius: 0;
        background: #fff;
        margin-right:10px;
    }
  .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
        border-top: 2px solid #3399ff;
    }
   .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: #3399ff;
        position: absolute;
        top: 0;
        left: 0;
    }
  .searchDiv {
    .marRight {
      margin-right: 15px;
    }
  }
  .ivu-form-item {
    margin-bottom: 15px;
  }
}

</style>


